<!-- 定时开关 -->
<template>
  <div class="timing-switch">
    <van-nav-bar title="定时开关" left-arrow @click-left="() => $router.go(-1)" @click-right="onClickRight"
      safe-area-inset-top>
      <template #right>
        <span style="color: #000">添加</span>
      </template>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 列表 -->
    <div class="list">
      <div class="item" v-for="(item, index) in list" v-bind:key="index">
        <div>
          <span>{{ item.devicename }}</span>
          <!-- <span>待执行</span> -->
        </div>
        <div>开始时间：{{ item.startHour }}:{{ item.startMinute }}</div>
        <div>结束时间：{{ item.stopHour }}:{{ item.stopMinute }}</div>
        <div>
          <span>类型：{{ item.type }}</span>
          <van-switch v-model="item.enable" size='18px' />
        </div>
        <div>
          <van-button class="btn" type="default" size="small" @click="del(item)" color="rgb(160,160,160)">删除
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { Toast, Dialog } from 'vant';
import { deviceRenWuList, deviceRenWuDel } from "../../api/device";
export default {
  name: "",
  data() {
    return {
      checked: true,
      list: []
    };
  },
  methods: {

    // 添加
    onClickRight() {
      this.$router.push({ path: '/add-task', query: { code: this.$route.query.code } })
    },
    async getData() {

      let res = await deviceRenWuList({ code: this.$route.query.code });


      if (res.status == 200) {

        let data = res.data;

        this.list = data.tasks;




      }
    },
    del(item) {
      var code = this.$route.query.code;

      Dialog.confirm({
        title: '系统提示',
        message: '确定要删除吗？',
      })
        .then(async () => {

          let res = await deviceRenWuDel({ code: code, taskId: item.taskId });
          if (res.status == 200) {

            this.$toast("删除成功");
            this.getData();

          }
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  created() {



    this.getData();
  },
  mounted() { },

};
</script>

<style lang="scss" scoped>
.timing-switch {
  width: 100%;
  height: 100%;

  .list {
    width: 100%;
    padding: 20px;

    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 15px;
      margin-bottom: 15px;
      height: 340px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 20px;
      font-size: 26px;

      >:first-child {
        :first-child {
          color: #3e96e8;
          margin-right: 50px;
        }
      }

      >:nth-child(4) {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      >:last-child {
        align-self: flex-end;
        margin-top: 20px;

        .btn {
          width: 120px;
          border-radius: 15px;
          height: 50px;
        }
      }
    }
  }
}
</style>
